import * as THREE from 'three';
import '../../css/base.css'
import {baseUrl as baseUrl2} from '../../js/base.js'


let canvas = document.getElementById("canvas")
let renderer, scene, camera;
let orbitControls, flyControls, pointerLockControls;
let startX, startY;
let v = .002, euler = new THREE.Euler(0, 0, 0, 'YXZ'), PI_2 = Math.PI / 2;

const clock = new THREE.Clock();

function initCSR() {
    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100000)

    scene = new THREE.Scene()

    renderer = new THREE.WebGLRenderer({canvas, preserveDrawingBuffer: true, antialias: true, alpha: true});
    camera.updateProjectionMatrix();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight, false)
}

function initModel() {
    //前后上下左右
    let arrImg = [
        loadTexture(require('../../../static/images/vrLook/O1_f.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_b.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_u.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_d.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_l.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_r.webp')),
    ]
    let geometry = new THREE.BoxGeometry(1000, 1000, 1000);
    let material = new THREE.MultiMaterial(arrImg)
    let mesh = new THREE.Mesh(geometry, material)

    scene.add(mesh)
}

function initControls() {
    // flyControls
    {
        // flyControls = new FlyControls(camera, canvas)
        // flyControls.movementSpeed = 1000;
        // flyControls.domElement = renderer.domElement;
        // flyControls.rollSpeed = Math.PI /12;
        // flyControls.autoForward = false;
        // flyControls.dragToLook = false;
    }
    // pointerLockControls
    {
        // pointerLockControls = new PointerLockControls(camera, document.body);
        // pointerLockControls.addEventListener('lock', () => menu.style.display = 'none');
        // pointerLockControls.addEventListener('unlock', () => menu.style.display = 'block');
    }


    canvas.addEventListener('touchstart', start, false)
    canvas.addEventListener('touchmove', move, false)
    canvas.addEventListener('mousedown', ev => {
        start(ev)
        canvas.addEventListener('mousemove', move, false)
    }, false)
    canvas.addEventListener('mouseup', () => {
        canvas.removeEventListener('mousemove', move)
    }, false)
    canvas.addEventListener('mouseout', () => {
        canvas.removeEventListener('mousemove', move)
    }, false)
}

function start(e) {
    startX = e.pageX || e.touches[0].pageX
    startY = e.pageY || e.touches[0].pageY
}

function move(e) {
    euler.setFromQuaternion(camera.quaternion);
    const pageX = e.pageX || e.touches[0].pageX, pageY = e.pageY || e.touches[0].pageY
    euler.y -= (startX - pageX) * v;
    euler.x -= (startY - pageY) * v;
    euler.x = Math.max(-PI_2, Math.min(PI_2, euler.x));
    camera.quaternion.setFromEuler(euler);

    startX = pageX
    startY = pageY
}

function loadTexture(url) {
    let textureLoader = new THREE.TextureLoader();
    let texture = textureLoader.load(url)
    // texture.offset.x = 1
    // texture.repeat.x = -1
    console.log(texture)
    const material = new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true,
        side: THREE.DoubleSide
    });
    return material
}

function render() {
    if (orbitControls) orbitControls.update();
    if (flyControls) flyControls.update(clock.getDelta());
    renderer.render(scene, camera)
}

function animation() {
    requestAnimationFrame(animation)
    render()
}

function saveImage(fileName) {
    const image = new Image();
    const base64 = canvas.toDataURL("image/webp", .1);
    image.src = base64;
    const a = document.createElement('a');
    a.href = base64;
    a.download = fileName || '图片名字';
    a.click();
}

(() => {
    initCSR();
    initModel();
    initControls();
    animation();
    window.addEventListener('resize', ev => {
        renderer.setPixelRatio(window.devicePixelRatio);
        camera.aspect = canvas.offsetWidth / canvas.offsetHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight, false)
    });
    canvas.onclick = () => {
        return
        const deg = [
            {x: 90, y: 0, z: 0, fileName: 'O1_u'},
            {x: -90, y: 0, z: 0, fileName: 'O1_d'},
            {x: 0, y: -90, z: 0, fileName: 'O1_f'},
            {x: 0, y: 90, z: 0, fileName: 'O1_b'},
            {x: 0, y: 0, z: 0, fileName: 'O1_r'},
            {x: 0, y: 180, z: 0, fileName: 'O1_l'},
        ]
        let count = 0

        function fun(params) {
            euler.set(THREE.MathUtils.degToRad(params.x), THREE.MathUtils.degToRad(params.y), THREE.MathUtils.degToRad(params.z), 'XYZ')
            camera.quaternion.setFromEuler(euler);
            console.log(JSON.stringify(euler))
            setTimeout(() => {
                saveImage(deg[count].fileName)
                if (deg[++count]) fun(deg[count])
            }, 100)
        }

        fun(deg[0])
    };
})();

